<template>
  <div class="comp-warning warning-wrapper">
    <p class="ge-title-one">合规预警</p>
   
    <van-row type="flex" justify="space-between" align="center">
      <van-col span="12">
        <p class="ge-title-two">{{einteractName}}</p>
      </van-col>
      <van-col span="5" style="text-align:right;">
        <div class="comp-more" @click="gotoEinteract">更多<van-icon name="arrow" color="#CCCCCC" style="top:2px;"/></div>
      </van-col>
    </van-row>
    
    <div class="pie-chart">
      <canvas :id="chartName"  style="width:100%;"></canvas>
    </div>

     <!--信披合规减分项-->
    <van-cell class="comp-title">
      <template slot="title">
        <p class="ge-title-two">信披合规减分项
          <img @click="showTip" class="final-tip" :src="require('@/assets/tip@2x.png')"/> 
        </p>
      </template>
    </van-cell>
      <div v-if="deductList.length === 0" class="bdl"><div class="no-deduct-info"><img class="no-data" :src="require('@/assets/noDeduct@2x.png')"/></div></div>
      <div class="warning-list has-last-line" v-if="deductList.length > 0">
        <van-cell 
          v-for="(item, index) in deductList"
          :key="index + 'deductList'"
          @click="gotoDetail(item.id,'deregulation', item.title)"
        >
          <div class="warning-item-title limit2line" >{{item.title}}</div>
          <div class="warning-item-subtitle limit2line"><span class="rel-reason">处理原因说明：</span>{{item.reason}}</div>
          <div class="warning-item-info">
            <van-row type="flex" justify="space-between" align="center">
              <van-col span="12">
                {{item.process_source}}
              </van-col>
              <van-col span="6" style="text-align:right;">
                <div class="warning-item-time">{{item.published_time}}</div>
              </van-col>
            </van-row>
          </div>
        </van-cell>
      </div>
      
      <!--
      <div v-if="deductList.length > 0" class="warning-list deduct-list has-last-line">
        <van-cell 
          v-for="(item, index) in deductList"
          :key="index"
        >
          <div class="warning-item-title" @click="gotoDetail(item.id,'deregulation', item.title)">{{item.title}}</div>
          <div class="warning-item-des">
            <van-row type="flex" justify="space-between" align="center">
              <van-col span="12">
                {{item.deal_type}}  {{item.process_dept}}
              </van-col>
              <van-col span="6" style="text-align:right;">
                <div class="warning-item-time">{{item.deal_time}}</div>
              </van-col>
            </van-row>
          </div>
        </van-cell>
     
        <van-cell>
          <div class="warning-item-title">发布《万科A：更正公告》</div>
          <div class="warning-item-des">
            <van-row type="flex" justify="space-between" align="center">
              <van-col span="12">
                <span class="deduct-type">公告更正次数</span>  交易所
              </van-col>
              <van-col span="6" style="text-align:right;">
                <div class="warning-item-time">2018-09-04</div>
              </van-col>
            </van-row>
          </div>
        </van-cell>
      </div>
      -->

    <!--关联方风险提示-->
    <p class="ge-title-two comp-title-text">关联方风险提示</p> 
    <div v-if="relativeList.length === 0" class="bdl"><div class="no-deduct-info"><img class="no-data" :src="require('@/assets/noRelative@2x.png')"/></div></div>
    <div class="warning-list has-last-line" v-if="relativeList.length > 0">
      <van-cell 
        v-for="(item, index) in relativeList"
        :key="index + 'relative'"
        @click="gotoDetail(item.id,'deregulation', item.title)"
      >
        <div class="warning-item-title limit2line" >{{item.title}}</div>
        <div class="warning-item-subtitle limit2line"><span class="rel-reason">处理原因说明：</span>{{item.reason}}</div>
        <div class="warning-item-info">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="12">
              关联关系：{{item.association_relationship}}
            </van-col>
            <van-col span="6" style="text-align:right;">
              <div class="warning-item-time">{{item.published_time}}</div>
            </van-col>
          </van-row>
        </div>
        <!--
        <div class="warning-item-title limit2line">2016年7月19日,我局收到您公司现场提交的关于 值预估的事件问题情况报告...</div>
        <div class="warning-item-subtitle limit2line"><span class="rel-reason">处理原因说明：</span>以市值为导向,指定品牌推广总体战略 品牌推广定品牌推广总体战略包推广括总...</div>
        <div class="warning-item-info">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="12">
              关联关系：子公司
            </van-col>
            <van-col span="6" style="text-align:right;">
              <div class="warning-item-time">2018-09-04</div>
            </van-col>
          </van-row>
        </div>
        -->
      </van-cell>
    </div>

    <!--其他风险提示-->
    <p class="ge-title-two comp-title-text">其他风险提示</p> 
    <div v-if="otherList.length === 0" class="bdl"><div class="no-other-info"><img class="no-data" :src="require('@/assets/noOther@2x.png')"/></div></div>
    <div class="warning-list has-last-line" v-if="otherList.length > 0">
      <van-cell 
        v-for="(item, index) in otherList"
        :key="index"
        @click="gotoDetail(item.id,'deregulation', item.title)"
      >
        <div class="warning-item-title limit2line" >{{item.title}}</div>
        <div class="warning-item-subtitle limit2line">
          <span class="rel-reason">处理原因说明：</span>{{item.reason}}
        </div>
        <div class="warning-item-info">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="12">
              关联关系：{{item.association_relationship}}
            </van-col>
            <van-col span="6" style="text-align:right;">
              <div class="warning-item-time">{{item.published_time}}</div>
            </van-col>
          </van-row>
        </div>
        <!--
        <div class="warning-item-title limit2line">2016年7月19日,我局收到您公司现场提交的关于 值预估的事件问题情况报告...</div>
        <div class="warning-item-subtitle limit2line"><span class="rel-reason">处理原因说明：</span>以市值为导向,指定品牌推广总体战略 品牌推广定品牌推广总体战略包推广括总...</div>
        <div class="warning-item-info">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="12">
              关联关系：子公司
            </van-col>
            <van-col span="6" style="text-align:right;">
              <div class="warning-item-time">2018-09-04</div>
            </van-col>
          </van-row>
        </div>
        -->
      </van-cell>
    </div>

    <!--同行监管违规项-->
    <p class="ge-title-two comp-title-text">同行监管违规项</p>
    <div v-if="industryList.length === 0" class="bdl"><div class="no-sentiment-info"><img class="no-data" :src="require('@/assets/noIndustry@2x.png')"/></div></div>
    <div class="warning-list" v-if="industryList.length > 0">
      <van-cell 
        v-for="(item, index) in industryList"
        :key="index"
        @click="gotoDetail(item.id,'deregulation', item.title)"
      >
        <div class="warning-item-title limit2line">{{item.title}}</div>
        <div class="warning-item-info">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="18" >
              {{item.stock_name}}({{item.stock_code}})  <span class="indust-number">{{item.process_type}}</span>   <span class="indust-number"> {{item.process_source}}</span>
            </van-col>
            <van-col span="6" style="text-align:right;">
              <div class="warning-item-time">{{item.published_time}}</div>
            </van-col>
          </van-row>
        </div>

        <!--
        <div class="warning-item-title limit2line">2016年7月19日,我局收到您公司现场提交的关于 值预估的事件问题情况报告</div>
        <div class="warning-item-info">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="18">
              万科(0000002)  <span class="indust-number">公告更正次数</span>   <span class="indust-number"> 交易所</span>
            </van-col>
            <van-col span="6" style="text-align:right;">
              <div class="warning-item-time">2018-09-04</div>
            </van-col>
          </van-row>
        </div>
        -->
      </van-cell>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import router from '@/router';
import { mapActions } from 'vuex';
import { BASIC_URL } from '@/core/config';
import { Row, Col, Dialog, List } from 'vant';
import {getInteractiveStatistic, getDeductList, getRiskWarning} from '@/api/warning';
import IngotCookie from '@/utils/cookie.js';
import getParam from '@/utils/getParam.js';

// 测试数据
// const res2 = {"code": 0, "data": {"data_list": [{"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u878d\u94b0\u96c6\u56e2", "id": "611832181777", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002622", "published_time": "2019-05-22", "title": "\u5173\u4e8e\u878d\u94b0\u96c6\u56e2\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u878d\u94b0\u96c6\u56e2\u80a1\u4efd\u6709\u9650\u516c\u53f82018\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u56fd\u8f69\u9ad8\u79d1", "id": "611833298984", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002074", "published_time": "2019-05-22", "title": "\u5173\u4e8e\u5bf9\u56fd\u8f69\u9ad8\u79d1\u7684\u76d1\u7ba1\u51fd", "reason": "\u5173\u4e8e\u5bf9\u56fd\u8f69\u9ad8\u79d1\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u76d1\u7ba1\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u9996\u822a\u8282\u80fd", "id": "611831214513", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002665", "published_time": "2019-05-22", "title": "\u5173\u4e8e\u9996\u822a\u8282\u80fd\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u5317\u4eac\u9996\u822a\u827e\u542f\u5a01\u8282\u80fd\u6280\u672f\u80a1\u4efd\u6709\u9650\u516c\u53f82018\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u5176\u4ed6", "stock_name": "\u6c47\u5ddd\u6280\u672f", "id": "611847067166", "association_relationship": "\u4e0b\u5c5e\u5b50\u516c\u53f8\u3001\u53c2\u80a1\u516c\u53f8", "stock_code": "300124", "published_time": "2019-05-21", "title": "\u4e34\u65f6\u516c\u544a", "reason": "\u51b3\u5b9a\u5bf9\u5929\u6d25\u8d1d\u601d\u7279\u7ed9\u4e88\u8b66\u544a,\u5e76\u5904\u4ee5\u7f5a\u6b3e35,200\u5143\u3002", "process_type": "\u5904\u7f5a"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u4e2d\u73af\u88c5\u5907", "id": "611785755546", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300140", "published_time": "2019-05-21", "title": "\u5173\u4e8e\u5bf9\u4e2d\u73af\u88c5\u5907\u7684\u76d1\u7ba1\u51fd", "reason": "\u5173\u4e8e\u5bf9\u4e2d\u8282\u80fd\u73af\u4fdd\u88c5\u5907\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u76d1\u7ba1\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u5176\u4ed6", "stock_name": "\u6c47\u5ddd\u6280\u672f", "id": "611847067168", "association_relationship": "\u4e0b\u5c5e\u5b50\u516c\u53f8\u3001\u53c2\u80a1\u516c\u53f8", "stock_code": "300124", "published_time": "2019-05-21", "title": "\u4e34\u65f6\u516c\u544a", "reason": "\u51b3\u5b9a\u5bf9\u5929\u6d25\u8d1d\u601d\u7279\u7ed9\u4e88\u8b66\u544a,\u5e76\u5904\u4ee5\u7f5a\u6b3e35,200\u5143\u3002", "process_type": "\u8b66\u544a"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u91d1\u5229\u534e\u7535", "id": "611744540355", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300069", "published_time": "2019-05-21", "title": "\u5173\u4e8e\u91d1\u5229\u534e\u7535\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u6df1\u5733\u5e02\u7d22\u83f1\u5b9e\u4e1a\u80a1\u4efd\u6709\u9650\u516c\u53f82019\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u96ea \u83b1 \u7279", "id": "611679355640", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002076", "published_time": "2019-05-20", "title": "\u5173\u4e8e\u96ea\u83b1\u7279\u7684\u5173\u6ce8\u51fd", "reason": "\u5173\u4e8e\u5bf9\u5e7f\u4e1c\u96ea\u83b1\u7279\u5149\u7535\u79d1\u6280\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5173\u6ce8\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e0a\u6d77\u4ea4\u6613\u6240", "stock_name": "\u98de\u4e50\u97f3\u54cd", "id": "611627109289", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "600651", "published_time": "2019-05-20", "title": "\u4e34\u65f6\u516c\u544a", "reason": "\u51fa\u5177\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u91d1\u9f99\u673a\u7535", "id": "611660457525", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300032", "published_time": "2019-05-20", "title": "\u5173\u4e8e\u91d1\u9f99\u673a\u7535\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u91d1\u9f99\u673a\u7535\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u73c8\u4f1f\u65b0\u80fd", "id": "611678742385", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300317", "published_time": "2019-05-20", "title": "\u5173\u4e8e\u73c8\u4f1f\u65b0\u80fd\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u73c8\u4f1f\u65b0\u80fd\u6e90\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u6d59\u5bcc\u63a7\u80a1", "id": "611427063149", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002266", "published_time": "2019-05-18", "title": "\u6d59\u5bcc\u63a7\u80a1\uff1a\u5173\u4e8e\u5bf9\u6df1\u5733\u8bc1\u5238\u4ea4\u6613\u6240\u95ee\u8be2\u51fd\u56de\u590d\u7684\u516c\u544a", "reason": "\u5173\u4e8e\u5bf9\u6d59\u5bcc\u63a7\u80a1\u96c6\u56e2\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e0a\u6d77\u4ea4\u6613\u6240", "stock_name": "\u65e5\u51fa\u4e1c\u65b9", "id": "611435916534", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "603366", "published_time": "2019-05-18", "title": "\u4e34\u65f6\u516c\u544a", "reason": "\u5173\u4e8e\u5bf9\u65e5\u51fa\u4e1c\u65b9\u63a7\u80a1\u80a1\u4efd\u6709\u9650\u516c\u53f82018\u5e74\u5e74\u5ea6\u62a5\u544a\u7684\u4e8b\u540e\u5ba1\u6838\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u67d8\u4e2d\u80a1\u4efd", "id": "611425292023", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002346", "published_time": "2019-05-17", "title": "\u5173\u4e8e\u67d8\u4e2d\u80a1\u4efd\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u4e0a\u6d77\u67d8\u4e2d\u96c6\u56e2\u80a1\u4efd\u6709\u9650\u516c\u53f82018\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u6d77\u5f97\u63a7\u5236", "id": "611337104648", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002184", "published_time": "2019-05-17", "title": "\u6d77\u5f97\u63a7\u5236\uff1a\u5173\u4e8e\u516c\u53f82018\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd\u4e4b\u56de\u590d", "reason": "\u5173\u4e8e\u5bf9\u4e0a\u6d77\u6d77\u5f97\u63a7\u5236\u7cfb\u7edf\u80a1\u4efd\u6709\u9650\u516c\u53f82018\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u6613 \u4e8b \u7279", "id": "611377443514", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300376", "published_time": "2019-05-16", "title": "\u5173\u4e8e\u6613\u4e8b\u7279\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u51fa\u5177\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "*ST \u5fb7\u5965", "id": "611313879166", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002260", "published_time": "2019-05-16", "title": "\u5173\u4e8e*ST\u5fb7\u5965\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u5fb7\u5965\u901a\u7528\u822a\u7a7a\u80a1\u4efd\u6709\u9650\u516c\u53f82018\u5e74\u5e74\u62a5\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e0a\u6d77\u4ea4\u6613\u6240", "stock_name": "\u667a\u6167\u80fd\u6e90", "id": "611176942783", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "600869", "published_time": "2019-05-14", "title": "\u5173\u4e8e\u8fdc\u4e1c\u667a\u6167\u80fd\u6e90\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u8fdc\u4e1c\u667a\u6167\u80fd\u6e90\u80a1\u4efd\u6709\u9650\u516c\u53f8\u5b50\u516c\u53f8\u4e2d\u6807\u4ee5\u53ca\u62c5\u4fdd\u4e8b\u9879\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e2d\u56fd\u8bc1\u76d1\u4f1a", "stock_name": "\u878d\u94b0\u96c6\u56e2", "id": "611311301769", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002622", "published_time": "2019-05-14", "title": "\u878d\u94b0\u96c6\u56e2\uff1a\u5173\u4e8e\u6536\u5230\u4e2d\u56fd\u8bc1\u76d1\u4f1a\u7acb\u6848\u8c03\u67e5\u7684\u98ce\u9669\u63d0\u793a\u516c\u544a", "reason": "\u5bf9\u878d\u94b0\u96c6\u56e2\u8d23\u4ee4\u6539\u6b63,\u7ed9\u4e88\u8b66\u544a,\u5e76\u5904\u4ee550\u4e07\u5143\u7f5a\u6b3e", "process_type": "\u8b66\u544a"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u575a\u745e\u6c83\u80fd", "id": "611055955853", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300116", "published_time": "2019-05-13", "title": "\u5173\u4e8e\u575a\u745e\u6c83\u80fd\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u9655\u897f\u575a\u745e\u6c83\u80fd\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u91d1\u5b87\u8f66\u57ce", "id": "611073946969", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "000803", "published_time": "2019-05-13", "title": "\u5173\u4e8e\u91d1\u5b87\u8f66\u57ce\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u56db\u5ddd\u91d1\u5b87\u6c7d\u8f66\u57ce(\u96c6\u56e2)\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e0a\u6d77\u4ea4\u6613\u6240", "stock_name": "\u5929\u6210\u63a7\u80a1", "id": "611030106681", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "600112", "published_time": "2019-05-13", "title": "\u5929\u6210\u63a7\u80a1\u5173\u4e8e\u5bf9\u4e0a\u6d77\u8bc1\u5238\u4ea4\u6613\u6240\u76d1\u7ba1\u5de5\u4f5c\u51fd\u56de\u590d\u7684\u516c\u544a", "reason": "\u5173\u4e8e\u8d35\u5dde\u957f\u5f81\u5929\u6210\u63a7\u80a1\u80a1\u4efd\u6709\u9650\u516c\u53f8\u51fa\u552e\u8d44\u4ea7\u76f8\u5173\u4e8b\u9879\u7684\u76d1\u7ba1\u5de5\u4f5c\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u548c\u6676\u79d1\u6280", "id": "611081429332", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300279", "published_time": "2019-05-13", "title": "\u5173\u4e8e\u548c\u6676\u79d1\u6280\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u65e0\u9521\u548c\u6676\u79d1\u6280\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "*ST \u731b\u72ee", "id": "610841557736", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "002684", "published_time": "2019-05-11", "title": "*ST\u731b\u72ee\uff1a\u5173\u4e8e\u6df1\u5733\u8bc1\u5238\u4ea4\u6613\u6240\u95ee\u8be2\u51fd\u7684\u56de\u590d\u516c\u544a", "reason": "\u5173\u4e8e\u5bf9\u5e7f\u4e1c\u731b\u72ee\u65b0\u80fd\u6e90\u79d1\u6280\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e2d\u56fd\u8bc1\u76d1\u4f1a", "stock_name": "\u6c38\u9f0e\u80a1\u4efd", "id": "610744722246", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "600105", "published_time": "2019-05-10", "title": "\u6c38\u9f0e\u80a1\u4efd\u5173\u4e8e\u6c5f\u82cf\u8bc1\u76d1\u5c40\u76d1\u7ba1\u5173\u6ce8\u51fd\u7684\u6574\u6539\u62a5\u544a", "reason": "\u51fa\u5177\u76d1\u7ba1\u5173\u6ce8\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e0a\u6d77\u4ea4\u6613\u6240", "stock_name": "\u676d\u7535\u80a1\u4efd", "id": "610745785789", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "603618", "published_time": "2019-05-10", "title": "\u5173\u4e8e\u5bf9\u676d\u5dde\u7535\u7f06\u80a1\u4efd\u6709\u9650\u516c\u53f8\u6709\u5173\u51fa\u552e\u80a1\u6743\u4e8b\u9879\u7684\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u676d\u5dde\u7535\u7f06\u80a1\u4efd\u6709\u9650\u516c\u53f8\u6709\u5173\u51fa\u552e\u80a1\u6743\u4e8b\u9879\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u5eb7\u8dc3\u79d1\u6280", "id": "610798895472", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "300391", "published_time": "2019-05-10", "title": "\u5173\u4e8e\u5eb7\u8dc3\u79d1\u6280\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u5eb7\u8dc3\u79d1\u6280\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e2d\u56fd\u8bc1\u76d1\u4f1a", "stock_name": "\u6c38\u9f0e\u80a1\u4efd", "id": "610746659784", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "600105", "published_time": "2019-05-09", "title": "\u6c38\u9f0e\u80a1\u4efd\u5173\u4e8e\u6c5f\u82cf\u8bc1\u76d1\u5c40\u76d1\u7ba1\u5173\u6ce8\u51fd\u7684\u6574\u6539\u62a5\u544a", "reason": "\u51fa\u5177\u76d1\u7ba1\u5173\u6ce8\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u6df1\u5733\u4ea4\u6613\u6240", "stock_name": "\u5408\u91d1\u6295\u8d44", "id": "610730272216", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "000633", "published_time": "2019-05-09", "title": "\u5173\u4e8e\u5408\u91d1\u6295\u8d44\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u65b0\u7586\u5408\u91d1\u6295\u8d44\u80a1\u4efd\u6709\u9650\u516c\u53f8\u7684\u5e74\u62a5\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}, {"process_source": "\u4e0a\u6d77\u4ea4\u6613\u6240", "stock_name": "\u676d\u7535\u80a1\u4efd", "id": "610746659787", "association_relationship": "\u672c\u516c\u53f8", "stock_code": "603618", "published_time": "2019-05-09", "title": "\u5173\u4e8e\u5bf9\u676d\u5dde\u7535\u7f06\u80a1\u4efd\u6709\u9650\u516c\u53f8\u6709\u5173\u51fa\u552e\u80a1\u6743\u4e8b\u9879\u7684\u95ee\u8be2\u51fd", "reason": "\u5173\u4e8e\u5bf9\u676d\u5dde\u7535\u7f06\u80a1\u4efd\u6709\u9650\u516c\u53f8\u6709\u5173\u51fa\u552e\u80a1\u6743\u4e8b\u9879\u7684\u95ee\u8be2\u51fd", "process_type": "\u5176\u4ed6"}], "regulatory_violation_desc": "regulatory_violation_desc"}, "message": "\u8bf7\u6c42\u54cd\u5e94\u6210\u529f"}

Vue.use(Row).use(Col).use(Dialog);
export default {
  name: 'ComplianceWarning',
  data() { 
    return {
      einteractName: getParam("market")==83?'E互动':'互动易',
      chartName: 'EPie',
      noReplyCount: 0,
      replyCount: 0,
      deductFinished: false, // 减分数据是否加载完成
      deductLoading: false, // 减分loading
      deductList: [], // 减分list
      deductDesc: '', 

      // relativeFinished: false, // 关联方风险数据是否加载完成
      // relativeLoading: false, // 关联方风险loading
      relativeList: [], // 关联方风险list

      // otherFinished: false, // 其他方风险数据是否加载完成
      // otherLoading: false, // 其他方风险loading
      otherList: [], // 其他方风险list

      industryFinished: false, // 同行监管违规项数据是否加载完成
      industryLoading: false, // 同行监管违规项loading
      industryList: [], // 同行监管违规项list
    };
  },
  mounted() {
    getInteractiveStatistic().then((res) => {
      const{question_count, reply_count, interactive_rank} = res.data;
      this.noReplyCount = question_count;
      this.replyCount = reply_count;
      this.interactRank = interactive_rank;
      this.drawChart();
    })
    // 信披合规减分项
    getDeductList({
      api_type: 'compliance',
    }).then((res) => {
      // console.log('res----', res);
      if(res.data.total_count > 0) {
        this.deductList = res.data.data_list;
      }
      this.deductDesc= res.data.regulatory_violation_desc;
    })

    // this.deductDesc= res2.data.regulatory_violation_desc;
    // this.deductList = res2.data.data_list;
    // this.relativeList = res2.data.data_list;
    // this.otherList = res2.data.data_list;

    // 关联方风险提示
    getRiskWarning({
      api_type: 'association',
    }).then((res) => {
      this.relativeList = res.data.data_list;
    });

    // 其他风险提示
    getRiskWarning({
      api_type: 'other',
    }).then((res) => {
      this.otherList = res.data.data_list;
    });

    // 同行监管违规项
    getRiskWarning({
      api_type: 'industry',
    }).then((res) => {
      // console.log('同行监管违规项', res);
      this.industryList = res.data.data_list;
    });
  },
  methods: {
     ...mapActions([
      'ac_gotoDetail'
    ]),
    gotoDetail(id,api_type, title){
      console.log('正在跳转到详情页...');
      console.log('传递详情页参数：', id, api_type, title);
      this.ac_gotoDetail({id, api_type, title});
    },
    moreInteract() {
      this.$router.push({name: 'interact'});
    },
    showTip() {
      if(!this.deductDesc) {
        return false;
      }
      Dialog.alert({
        title: '提示',
        message: this.deductDesc,
        confirmButtonText: '我知道了'
      }).then(() => {
        // on close
      });
    },
    // 加载关联方风险数据
    /*loadRelative() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          this.relativeList.push(this.relativeList.length + 1);
        }
        // 加载状态结束
        this.relativeLoading = false;

        // 数据全部加载完成
        if (this.relativeList.length >= 1) {
          this.relativeFinished = true;
        }
      }, 500);
    },
    // 加载其他方风险数据
    loadOther() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          this.otherList.push(this.otherList.length + 1);
        }
        // 加载状态结束
        this.otherLoading = false;

        // 数据全部加载完成
        if (this.otherList.length >= 1) {
          this.otherFinished = true;
        }
      }, 500);
    },
    
    // 加载同行监管违规项数据
    loadIndustry() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.industryList.push(this.industryList.length + 1);
        }
        // 加载状态结束
        this.industryLoading = false;

        // 数据全部加载完成
        if (this.industryList.length >= 1) {
          this.industryFinished = true;
        }
      }, 500);
    },*/
    // 跳转e互动
    gotoEinteract() {
      console.log('开始跳转到e互动详情页...');
      // this.$router.push('/interact')
      let r = BASIC_URL+"interact"
      let n = this.einteractName
      if(IngotCookie.get('source')=='ios'){
        // console.log(IngotCookie.get('source'))
        window.webkit.messageHandlers.NoticeLinkEHDJumpMore.postMessage(n+'_'+r);
      }else if(IngotCookie.get('source')=='android'){
        // console.log(IngotCookie.get('source'))
        window.AndroidWebView.NoticeLinkEHDJumpMore("true", r, n);
      }
      return false;
    },
    drawChart() {
      var data = [{
        name: '已回复',
        value: this.replyCount,
        a: '1'
      }, {
        name: '待回复',
        value: this.noReplyCount,
        a: '1'
      }];
      let map = {};
      // 是否有100的情况，为后面画完整圆环做准备
      let has100 = false;
      data.forEach(function(obj) {
        map[obj.name] = obj.value;
        if(obj.value == 100 || obj.value == 0) {
          has100 = true;
        }
      });
      // Step 1: 创建 Chart 对象
      const chart = new this.$F2.Chart({
        id: this.chartName,
        padding: [0, 0, 20, 0],
        appendPadding: 0,
        // width: 300,
        // height: 300 * 0.64,
        pixelRatio: window.devicePixelRatio // 指定分辨率
      });

      // 设置图例项的内容
      var colorMap = {
        '待回复': '#F37969',
        '已回复': '#EAC386',
      };
      var legendItems = [];
      data.map(function(obj) {
        var item = {
          name: obj.name + ' ' + obj.value + '条',
          //value: ' ' + obj.value + '条',
          marker: {
            symbol: 'square',
            fill: colorMap[obj.name],
            radius: 6
          }
        };
        legendItems.push(item);
      });

      // Step 2: 载入数据源
      chart.source(data);
      chart.tooltip(false);
      chart.axis(false);
      chart.legend({
        custom: true,
        items: legendItems,
        nameStyle: {
          fill: '#757679',
          fontSize: '14', // 文本大小
          fontWeight: 'bold', // 文本粗细
        }, // 图例项 key 值文本样式
        valueStyle: {
          fill: '#333',
          fontSize: '14',
          fontWeight: 'bold' // 图例项 value 值文本样式
        },
        position: 'bottom',
        align: 'center',
      });
      chart.coord('polar', {
          transposed: true,
          innerRadius: 0.7,
          radius: 0.85
        });
      let circleStyle = {};
      if(!has100){
        circleStyle = {
          lineWidth: 3,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round'
        }
      }
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart.interval().position('a*value').color('name', function(val) {
        return colorMap[val];
      })
      .adjust('stack')
      .style(circleStyle);

      chart.guide().html({
        position: ['50%', '50%'],
        html: '<div class="pie-info-wrapper" id="interactTextInfo">'
            + '<div style="font-weight:bold">' + this.interactRank + '</div>'
            + '<div class="comp-pie-subtext">击败同行公司</div>'
            + '</div>'
      });

      // Step 4: 渲染图表
      chart.render();

      let canvas = chart.get('canvas');
      // console.log('canvas', canvas);
      let el = canvas.get('el');
      let self = this;
      function toEDetail(event) {
        console.log('点击canvas');
        let point = {
          x: event.clientX,
          y: event.clientY
        };
        point = self.$F2.Util.getRelativePosition(point, canvas);
        // 根据画布坐标获取对应数据集
        const record = chart.getSnapRecords(point)[0];
        console.log(record);
          
        if (!record) return;
        if(record._origin.name == '已回复' || record._origin.name == '待回复'){
          self.gotoEinteract();
        }
        return false;
      }
      const textEl = document.getElementById("interactTextInfo");
      el.addEventListener('click', toEDetail , false);
      textEl && (textEl.addEventListener('click', this.gotoEinteract , false));
    }
  }
};
</script>

<style>
.deduct-type{
  
}
.no-deduct-info{
  /* padding-top:8px; */
  padding: 30px 0;
  margin: 0 auto;
  width: 203px;
  /* height: auto; */
}
.no-other-info{
  margin: 0 auto;
  padding: 30px 0;
  /* height: 182px; */
  width:203px;
}
.comp-warning{
  margin-bottom: 60px;
}
.comp-warning .comp-title{
  padding:0;
}
.comp-title-text{
  margin: 16px 0  0px 0;
}
.deduct-list .van-cell{
  padding:12px 6px 13px;
}
.has-last-line .van-cell:last-child:after{
    content: ' ';
    position: absolute;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 15px;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    border-bottom: 0px solid #ebedf0;
}
.comp-more{
  font-size:12px;
  color: #757679;
}
.comp-pie-rate{
  font-size: 29px;
  color: #222222;
}
.comp-pie-subtext{
  color: #D4B686;
  font-size: 12px;
}
.warning-item-time{
  font-size:12px;
  color: #BCBCBC;
}

.rel-reason{
  color: #D4B686;
}
.indust-number{
  padding-left:13px;
  color: #757679;
}

</style>